<template>
	<cl-page status-bar-background="#2b2e3d">
		<view class="page-my">
			<view class="bg"></view>

			<view class="container">
				<view class="info">
					<!-- 头像 -->
					<view class="avatar">
						<cl-avatar :size="100" :src="user.info?.avatarUrl" />
					</view>

					<view class="det">
						<!-- 昵称 -->
						<cl-text :size="36" bold block color="#fff" @tap="toLogin">
							{{ user.info?.nickName || "点击登录" }}
						</cl-text>
						<!-- <cl-text color="info" v-if="user.info.adViewing!=1" :size="24"
							:margin="[10,0,0,0]">需观看广告次数：</cl-text>
						<cl-text color="info" v-if="user.info.adViewing!=1" :size="24" :margin="[10,0,0,0]">
							{{ user.info?.adNumber}}次
						</cl-text> -->

						<!-- 手机号 -->
						<!-- <button class="phone" :open-type="user.info?.phone ? '' : 'getPhoneNumber'"
							@getphonenumber="toBindPhone">
							<cl-text color="info">手机号：</cl-text>
							<cl-text color="info">
								{{ user.info?.phone || "未绑定，点击获取" }}
							</cl-text>
						</button> -->
					</view>

					<!-- 设置 -->
					<!-- #ifndef MP-WEIXIN -->
					<text class="cl-icon-set" @tap="router.push('/pages/user/set')"></text>
					<!-- #endif -->
				</view>

				<!-- 我的订单 -->

				<view class="order" v-if="dict.getLabel('appConfig','shopping')!=0">
					<view class="label">
						<cl-text :size="28" bold>我的订单</cl-text>

						<view class="more" @tap="order.toList()">
							<cl-text color="info" :size="24"> 全部 </cl-text>
							<cl-icon color="info" name="arrow-right"></cl-icon>
						</view>
					</view>

					<view class="status">
						<view class="item" v-for="(item, index) in order.types" :key="index"
							@tap="order.toList(item.value)">
							<cl-badge :value="item.number" :max="99" :margin="14" type="error" plain>
								<cl-icon :class-name="item.icon" :size="70" color="primary" />
							</cl-badge>

							<cl-text color="info" :size="24" :margin="[10, 0, 0, 0]">
								{{ item.label }}
							</cl-text>
						</view>
					</view>
				</view>

				<!-- 菜单 -->
				<cl-list :radius="24" :border="false">
					<cl-list-item label="商城客服" @tap="showChart" />
					<cl-list-item label="收货地址" @tap="router.push('/pages/user/address-list')" />
					<cl-list-item label="商品分类" v-if="dict.getLabel('appConfig','shopping')!=0"
						@tap="router.push('/pages/index/category')" />
					<cl-list-item label="播放记录" @tap="router.push('/pages/index/recordList')" />
					<cl-list-item label="自助问方答疑" @tap="showAnswering" />
					<cl-list-item label="背景音频设置" @tap="router.push('/pages/user/select-audio')" />
					<cl-list-item label="背景音频列表" @tap="router.push('/pages/user/audio-list')" />
					<!-- #ifndef MP-WEIXIN -->
					<cl-list-item label="跳转小程序" @tap="jumpWx" />
					<!-- #endif -->
					<!-- <cl-list-item label="跳过广告" @tap="showAd" v-if="user.info.adNumber==1&&user.info.adViewing==1" /> -->
				</cl-list>

				<!-- 设置 -->
				<cl-list :radius="24" :border="false">
					<cl-list-item label="设置" @tap="router.push('/pages/user/set')" />
				</cl-list>
			</view>
		</view>

		<!-- <tabbar /> -->
		<cl-popup v-model="visible" border-radius="20rpx">
			<view style="text-align:center;">
				微信扫码添加六一老师
				<cl-text block align="center" :size="24" color="info" :line-height="1.2"
					:margin="[20, 0, 0, 20]">点击图片长按保存</cl-text>
				<view style="height:560rpx">
					<cl-image class="kefu" style="width:468rpx;height:660rpx"
						src="https://image-apk-1310343798.cos.ap-nanjing.myqcloud.com/app%2Fbase%2F42f5e48c6df84379a72250d0ea948476_6b73e95a4165fa76ed542def814a7cc.jpg"
						:preview-list="['https://image-apk-1310343798.cos.ap-nanjing.myqcloud.com/app%2Fbase%2F42f5e48c6df84379a72250d0ea948476_6b73e95a4165fa76ed542def814a7cc.jpg']"></cl-image>
				</view>
			</view>
		</cl-popup>
	</cl-page>
</template>

<script lang="ts" setup>
	import { reactive, ref } from "vue";
	import { useCool, useStore, useWx } from "/@/cool";
	import { useUi } from "/$/cool-ui";
	import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
	import Tabbar from "./components/tabbar.vue";
	import { tencentUrl } from "/@/cool/utils";
	const { service, router } = useCool();
	const { dict, user } = useStore();
	const ui = useUi();
	const wx = useWx();
	const visible = ref(false)
	// 订单
	const order = reactive({
		types: [
			{
				label: "待付款",
				icon: "shop-icon-order-paid",
				value: 0,
				number: 0,
			},
			{
				label: "待发货",
				icon: "shop-icon-order-not-shipped",
				value: 1,
				number: 0,
			},
			{
				label: "待收货",
				icon: "shop-icon-order-received",
				value: 2,
				number: 0,
			},
			{
				label: "待评价",
				icon: "shop-icon-order-comment",
				value: 3,
				number: 0,
			},
			{
				label: "退款/售后",
				icon: "shop-icon-order-refund",
				value: "5,6",
				number: 0,
			},
		],

		// 查看订单
		toList(status ?: string | number) {
			router.push({
				path: "/pages/order/list",
				query: {
					status,
				},
			});
		},

		// 获取订单统计
		refresh() {
			service.order.info.userCount().then((res) => {
				order.types[0].number = res["待付款"];
				order.types[1].number = res["待发货"];
				order.types[2].number = res["待收货"];
				order.types[3].number = res["待评价"];
				order.types[4].number = res["退款中"] + res["已退款"];
			});
		},
	});
	function showAnswering() {
		uni.navigateToMiniProgram({
			appId: 'wx4c6401744b734596',
			path: 'pages/index/index?shareId=802ed87c995c968aed3692a1d0c1740fcdb21313ba385bd4e9628fc06550654a',
			success(res) {
				// 打开成功
			}
		})
	}
	function showAd() {
		ui.showConfirm({
			title: "广告",
			message: `需要播放一段广告用于助念器的日常维护,播放${user.info?.adNumber}次后当日不再弹框`,
			showCancelButton: true,
			confirmButtonText: "播放",
			cancelButtonText: "取消",
			callback(action) {
				if (action == "confirm") {
					ui.showAdRewared()
				} else {
				}
			}
		});
	}
	// 去登录
	function toLogin() {
		if (!user.token) {
			user.logout();
		}
	}
	function jumpWx() {
		wx.jumpWxApplet()
	}
	function showChart() {
		visible.value = true
	}
	onShareAppMessage(() => {
		return {
			path: "/pages/index/index",
			title: "借天地能量，助身心健康！象数疗法有缘人共享~",
			imageUrl: "https://image-apk-1310343798.cos.ap-nanjing.myqcloud.com/common_option/wechat_option/share.jpg"
		}
	})
	onShareTimeline(() => {
		return {
			path: "/pages/index/index",
			title: "借天地能量，助身心健康！象数疗法有缘人共享~",
			imageUrl: "https://image-apk-1310343798.cos.ap-nanjing.myqcloud.com/common_option/wechat_option/share.jpg"
		}
	})
	// 绑定手机号
	function toBindPhone(e : { detail : any }) {
		service.user.info
			.miniPhone({
				...e.detail,
				code: wx.code.value,
			})
			.then((phone) => {
				ui.showToast("手机号绑定成功");

				user.update({
					phone,
				});
			})
			.catch((err) => {
				ui.showToast(err.message);
			});
	}

	onShow(() => {
		// #ifndef WEB
		// order.refresh();
		// toLogin();
		// #endif
		// #ifdef WEB
		router.push("/pages/index/download")
		// #endif
	});
</script>

<style lang="scss" scoped>
	.page-my {
		position: relative;
		overflow: hidden;
		min-height: 90vh;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			height: 700rpx;
			width: 100%;
			background: linear-gradient(to bottom, #2b2e3d, rgba(#2b2e3d, 0.8), #f6f7fa);
		}

		.container {
			padding: 0 24rpx;
			position: relative;

			.info {
				display: flex;
				align-items: center;
				position: relative;
				padding: 40rpx 10rpx;

				.avatar {
					margin-right: 30rpx;
				}

				.phone {
					display: inline-block;
					border: 0;
					padding: 0;
					margin: 0;
					line-height: normal;
					font-size: 24rpx;
					margin-top: 14rpx;
					background-color: transparent;

					&::after {
						border: 0;
					}
				}

				.cl-icon-set {
					position: absolute;
					right: 10rpx;
					top: 34rpx;
					font-size: 40rpx;
					color: #fff;
				}
			}

			.order {
				padding: 24rpx;
				margin-bottom: 24rpx;
				border-radius: 24rpx;
				background-color: #ffffff;

				.label {
					display: flex;
					justify-content: space-between;
					margin-bottom: 12rpx;

					.more {
						display: flex;
						align-items: center;
					}
				}

				.status {
					display: flex;
					padding: 24rpx 0;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						flex: 1;
						position: relative;
					}
				}
			}
		}
	}
</style>